import React, { Component } from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import moment from 'moment';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import DescriptionList from '../../../components/DescriptionList';

const { Description } = DescriptionList;

@connect(state => ({
  queryInfo: state.openstack.queryInfo,
}))
export default class OpenStackDetails extends Component {
  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    const { id } = params;
    dispatch({
      type: 'openstack/query',
      payload: id,
    });
  }

  render() {
    const { queryInfo } = this.props;
    const { name } = queryInfo;

    return (
      <PageHeaderLayout title="OpenStack信息">
        <Card bordered={false}>
          <DescriptionList size="large" col={2} title={name} style={{ marginBottom: 32 }}>
            <Description term="id">{queryInfo.id}</Description>
            <Description term="name">{queryInfo.name}</Description>
            <Description term="description">{queryInfo.description}</Description>
            <Description term="regionID">{queryInfo.regionID}</Description>
            <Description term="regionName">{queryInfo.regionName}</Description>
            <Description term="domainName">{queryInfo.domainName}</Description>
            <Description term="projectName">{queryInfo.projectName}</Description>
            <Description term="keystoneUrl">{queryInfo.keystoneUrl}</Description>
            <Description term="userName">{queryInfo.userName}</Description>
            <Description term="createTime">{moment(queryInfo.createTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
            <Description term="updateTime">{moment(queryInfo.updateTime).format('YYYY-MM-DD HH:mm:ss')}</Description>
          </DescriptionList>
        </Card>
      </PageHeaderLayout>
    );
  }
}
